<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<button id="start">开始</button>
<button id="counts">计次</button>
<button id="stop">暂停</button>
<button id="reset">重置</button>


<span id="clock">
    <span id="a">00</span> :
    <span id="b">00</span> :
    <span id="c">00</span> .
    <span id="d">000</span>
</span>

<div id="list">

</div>

<script>

    var start = document.getElementById('start');
    var stop = document.getElementById('stop');
    var clock = document.getElementById('clock');
    var a = document.getElementById('a');
    var b = document.getElementById('b');
    var c = document.getElementById('c');
    var d = document.getElementById('d');
    var l = document.getElementById('list');

    start.onclick = function () {

        var ts1 = Date.parse(new Date());

        setInterval(function () {
            var t2 = new Date();
            d.innerText = t2.getMilliseconds();
            //此刻的时间戳
            var ts2 = Date.parse(t2);

            //按下秒表的时候和当前时间比起来，经过的秒数
            var s = (ts2 - ts1)/1000;
            c.innerText = addZero(s);

            var sec = c.innerText;
            
            if (sec >= 3){
                // 获取分的数据，并且在原有的基础上加1
                b.innerText = addZero(parseInt(b.innerText) + 1);
                // 秒的数值 重置为0
                c.innerText = addZero(0);
                //计时阶段重新开始
                ts1 = Date.parse(new Date())
            }

            var min = b.innerText;

            if (min >= 3){
                // 获取分的数据，并且在原有的基础上加1
                a.innerText = addZero(parseInt(a.innerText) + 1);
                // 秒的数值 重置为0
                b.innerText = addZero(0);
            }
        },1)
    };

    stop.onclick = function () {

        var str = a.innerText + ':' + b.innerText + ':' + c.innerText + '.' + d.innerText;
        l.innerHTML = l.innerHTML + '<div>' + str +'</div>';

    }


    
    
    // function setSec() {
    //
    //     var t1 = new Date();
    //
    //
    // }

    
    function addZero(x) {
        if(x < 10){
            return '0' + x;
        }else{
            return x;
        }
    }





</script>

</body>
</html>